<script setup lang="ts">
import {onMounted, nextTick, watch, reactive} from "vue";
import {useUserProfile} from "@/stores/useUserProfile"
import {storeToRefs} from "pinia";
import * as echarts from 'echarts/core';
import {
	TitleComponent,
	ToolboxComponent,
	TooltipComponent,
	GridComponent,
	DataZoomComponent
} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';

echarts.use([
	TitleComponent,
	ToolboxComponent,
	TooltipComponent,
	GridComponent,
	DataZoomComponent,
	LineChart,
	CanvasRenderer,
	UniversalTransition
]);
const {latestTelemetryData} = storeToRefs(useUserProfile())
const props = defineProps({
	chartType: {
		type: String,
		default: "numeric" // 图表类型数值型和枚举型
	},
	data: {
		type: Array,
		default: [
			{
				label: '激光终端状态',
				value: '系统待机状态',
				raw: 14,
				sourceCode: '0xe',
				bitLength: 4
			},
			{
				label: '激光终端状态',
				value: '系统待机状态',
				raw: 14,
				sourceCode: '0xe',
				bitLength: 4
			}
		]
	}
})

const localData = []
const option = reactive({
	tooltip: {
		trigger: 'axis',
		position: function (pt) {
			return [pt[0], '10%'];
		}
	},
	title: {
		left: 'center',
		text: 'Large Ara Chart'
	},
	toolbox: {
		feature: {
			dataZoom: {
				yAxisIndex: 'none'
			},
			restore: {},
			saveAsImage: {}
		}
	},
	xAxis: {
		type: 'time',
		boundaryGap: false
	},
	yAxis: {
		type: 'value',
		boundaryGap: [0, '100%']
	},
	dataZoom: [
		{
			type: 'inside',
			start: 0,
			end: 20
		},
		{
			start: 0,
			end: 20
		}
	],
	series: [
		{
			name: 'Fake Data',
			type: 'line',
			smooth: true,
			symbol: 'none',
			areaStyle: {},
			data: []
		}
	]
})
let chartDom;
var myChart;
watch(latestTelemetryData, (newValue) => {
	let opt = myChart.getOption() || option
	localData.push([Date.parse(newValue.dateTime), newValue.parsedData.find(item => item.label === "相机光斑质心X").value])
	opt.series[0].data = localData
	option && myChart.setOption(opt);
})
onMounted(() => {
	nextTick(() => {
		chartDom = document.getElementById('main');
		myChart = echarts.init(chartDom);
	})
})

</script>

<template>
	<div id="main" style="width: 50%;height:50%;"></div>
</template>

<style scoped>

</style>